<template>
	<view>
		<swiper 
		:indicator-dots="true" 
		:autoplay="true" 
		:interval="3000" 
		:duration="1000"
		:current="index"
		@change="changeCurrent"
		>
			<swiper-item v-for="item in swiperdata" :key="item.id">
				<view class="swiper-item" style="width: 100%;">
				<image :src="item.imagePath" mode="scaleToFill" style="width: 100%;"></image>
				</view>
			</swiper-item>
			
		</swiper>
		<image src="../../static/1.jpg" mode="scaleToFill"></image>
		<image src="../../static/1.jpg" mode="aspectFit"></image>
		<image src="../../static/1.jpg" mode="aspectFill"></image>
		<image src="../../static/1.jpg" mode="widthFix"></image>
		<image src="../../static/1.jpg" mode="heightFix"></image>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:1,
				swiperdata:[
					{id:1001,imagePath:'https://api-hmugo-web.itheima.net/pyg/banner1.png'},
					{id:1002,imagePath:'https://api-hmugo-web.itheima.net/pyg/banner2.png'},
					{id:1003,imagePath:'https://api-hmugo-web.itheima.net/pyg/banner3.png'}
				]
			}
		},
		methods: {
			changeCurrent(e){
				console.log(e);
			}
		}
	}
</script>

<style>

</style>
